<template>
    <div :ref="data.ref" class='echart'></div>
</template>
<script>
    
import echarts from 'echarts'
export default {

    name: 'echarts-pie',

    props: {
        'data': {
            type: [Object],
            default: {}
        }
    },

    mounted() {
        this.$nextTick(function() {
            this.drawChats();
        })
    },

    data: function() {
        return {
            chart: null,
        }
    },

    methods: {

        legend() {
        	let legend = {
                orient: 'vertical',
                x: 'left',
                data: this.data.legend
        	};
            return legend;
        },
        
        series() {
            let series = [];
            for (var i in this.data.series) {
                let item = {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:this.data.series[i]
                };
                series.push(item);
            }
            if (series.length < 1) { series = {type: 'pie',data:[]} };
            return series;
        },

    	drawChats() {
            let dom = this.$refs[this.data.ref];
            this.chart = echarts.init(dom);
            this.chart.clear();
            this.chart.hideLoading();
            this.chart.setOption(
                {
                    title : {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend:this.legend(),
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : this.series()
            });
        },

    }

};
</script>
<style scoped lang="less">
.echart {
    position: relative;
    min-width: 200px;
    min-height: 200px;
}
</style>